<!DOCTYPE html>
<!--<html lang="en">-->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<head>
    <meta charset="UTF-8">
    <title>618销售数据统计</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/map.css">
</head>
<body>
<div class="data">

    <div class="data-title">
        <div class="title-left fl"></div>
        <div class="title-center fl"></div>
        <div class="title-right fr"></div>
    </div>
    <div class="data-content">

        <div class="con-left fl">
            <div class="left-top">

<!--                平台销售排行thymeleaf-->
                <div class="info">
                    <div class="info-title">平台销售排行(亿)</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">

                    <div class="info-main" id="platTop">
                        <div class="info-1">
                            <div class="info-img fl">
                                <img src="img/info-img-1.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>Top1 天猫</p>
                                <p th:text="${data.get(0).getValue()}">12,457亿</p>
                            </div>
                        </div>
                        <div class="info-2">
                            <div class="info-img fl">
                                <img src="img/info-img-2.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>Top2 京东</p>
                                <p th:text="${data.get(1).getValue()}">12,457亿</p>
                            </div>
                        </div>
                        <div class="info-3">
                            <div class="info-img fl">
                                <img src="img/info-img-3.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>Top3 拼多多</p>
                                <p th:text="${data.get(2).getValue()}">12,457亿</p>
                            </div>
                        </div>
                        <div class="info-4">
                            <div class="info-img fl">
                                <img src="img/info-img-4.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>Top4 抖音</p>
                                <p th:text="${data.get(3).getValue()}">83亿</p>
                            </div>
                        </div>
                    </div>
                </div>

<!--                品牌销售排行-->
                <div class="top-bottom">
                    <div class="title">品牌销售排行Top5</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div id="echarts_1" class="charts"></div>
                </div>


            </div>
<!--            直播带货排行Top5-->
            <div class="left-bottom">
                <div class="title">直播带货排行Top5</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_2" class="charts"></div>
            </div>
        </div>

        <div class="con-center fl">

            <div class="map-num">
                <p>实时销售数据(亿元)</p>
                <div class="num">
                    <span th:text=" ${count_sales}">1</span>
                </div>
                <p>实时访问人数</p>
                <div class="num">
                    <span th:text=" ${count_ip}">1</span>
                </div>
            </div>

            <div class="cen-top" id="map"></div>


        </div>
        <div class="con-right fr">
            <div class="right-top">
                <div class="title">销售类别统计</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_4" class="charts"></div>
            </div>



            <div class="right-center">
                <div class="title">平台销售排行Top5</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_5" class="charts"></div>
            </div>



            <div class="right-bottom">
                <div class="title">时段访问数据展示</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_6" class="charts"></div>
            </div>
        </div>
    </div>
</div>



</body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/echarts.js"></script>




</html>


